<template>
  <view class="container">

    <!-- 轮播图 -->
    <view class="banner-container">
      <swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.imageUrl" class="banner-img" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 通知公告 -->
    <view class="notice-container">
      <image src="/static/images/notice.png" class="notice-icon" mode="aspectFit"></image>
      <view class="notice-content">
        <view class="notice-swiper" :style="{transform: `translateY(-${currentIndex * 40}px)`, transition: `transform 0.5s ease`}">
          <view class="notice-text" v-for="(item, index) in announcementList" :key="index" @tap="onNoticeClick(item)">
            <text class="notice-title">{{ item.title || '' }}</text>
            <text class="notice-time">{{ item.publishTime || '' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 分类导航 -->
    <view class="category-container">
      <view class="category-item" v-for="(category, index) in categoryList" :key="index" @tap="onCategoryClick(category)">
          <view class="category-icon">
            <image :src="category.icon" mode="aspectFit"></image>
          </view>
          <text class="category-name">{{ category.name }}</text>
        </view>
    </view>

    <!-- 热门商品 -->
    <view class="hot-products">
      <view class="hot-header">
        <text class="hot-title">热门商品</text>
        <view class="hot-more">
          <text class="more-text">查看全部</text>
          <image src="/static/images/arrow-right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>
      <view class="products-list">
        <view class="product-item" v-for="(product, index) in productsList" :key="index" @tap="onProductClick(product)">
          <view class="product-img-container">
            <image :src="product.img" class="product-img" mode="aspectFill"></image>
            <text class="product-tag" v-if="product.tag">{{ product.tag }}</text>
          </view>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-desc">{{ product.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getCarouselList, getAnnouncementList } from '../../api/index';
  
  export default {
    name: "indexPage",
    data() {
      return {
        // 轮播图数据
        bannerList: [],
        // 通知公告数据
        announcementList: [],
        // 当前显示的公告索引
        currentIndex: 0,
        // 公告行高 (单位: rpx)
        lineHeight: 80,
        // 轮播定时器
        noticeTimer: null,
        // 分类数据（模拟，实际从接口获取）
        categoryList: [
          {
            id: 1,
            name: '蔬菜水果',
            icon: '/static/images/category1.png'
          },
          {
            id: 2,
            name: '肉禽蛋奶',
            icon: '/static/images/category2.png'
          },
          {
            id: 3,
            name: '海鲜水产',
            icon: '/static/images/category3.png'
          },
          {
            id: 4,
            name: '粮油米面',
            icon: '/static/images/category4.png'
          },
          {
            id: 5,
            name: '休闲零食',
            icon: '/static/images/category5.png'
          },
          {
            id: 6,
            name: '酒水饮料',
            icon: '/static/images/category6.png'
          },
          {
            id: 7,
            name: '日用品',
            icon: '/static/images/category7.png'
          },
          {
            id: 8,
            name: '更多分类',
            icon: '/static/images/category8.png'
          }
        ],
        // 热门商品数据（模拟，实际从接口获取）
        productsList: [
          {
            id: 1,
            name: '有机西红柿 500g/份',
            desc: '新鲜采摘',
            img: '/static/images/tomato.png',
            tag: '热销'
          },
          {
            id: 2,
            name: '纯鲜牛奶 500ml/瓶',
            desc: '早餐必备',
            img: '/static/images/milk.png',
            tag: '特惠'
          }
        ]
      }
    },
    onLoad() {
      // 页面加载时调用接口获取数据
      this.loadData();
    },
    // 页面卸载时清除定时器
    onUnload() {
      this.stopNoticeSwiper();
    },
    methods: {
      // 加载页面数据
      loadData() {
        this.getBannerList();
        this.getAnnouncementList();
      },
      // 获取轮播图数据
      async getBannerList() {
        try {
          const res = await getCarouselList();
          if (res.code === 200 && res.data && res.data.length > 0) {
            // 假设接口返回的数据结构是 { code: 200, data: [] }
            this.bannerList = res.data;
          }
        } catch (error) {
          console.error('获取轮播图数据失败:', error);
          // 如果接口调用失败，可以使用默认的模拟数据
          this.bannerList = [
            {
              id: 1,
              img: '/static/images/banner1.png'
            },
            {
              id: 2,
              img: '/static/images/banner2.png'
            },
            {
              id: 3,
              img: '/static/images/banner3.png'
            }
          ];
        }
      },
      // 获取通知公告数据
      async getAnnouncementList() {
        try {
          const res = await getAnnouncementList();
          if (res.code === 200 && res.data && res.data.length > 0) {
            // 假设接口返回的数据结构是 { code: 200, data: [] }
            this.announcementList = res.data;
            this.startNoticeSwiper();
          } else {
            // 如果没有数据，使用默认的模拟数据
          this.announcementList = [
            { id: 1, title: '欢迎来到鲜邻社，全场新鲜食材满39元免配送费！', publishTime: '2024-01-15' },
            { id: 2, title: '每日10点准时上新，新鲜食材不等待！', publishTime: '2024-01-14' },
            { id: 3, title: '新用户注册即送20元优惠券，限时活动！', publishTime: '2024-01-13' }
          ];
          this.startNoticeSwiper();
        }
        } catch (error) {
          console.error('获取通知公告数据失败:', error);
          // 如果接口调用失败，可以使用默认的模拟数据
          this.announcementList = [
            { id: 1, title: '欢迎来到鲜邻社，全场新鲜食材满39元免配送费！', publishTime: '2024-01-15' },
            { id: 2, title: '每日10点准时上新，新鲜食材不等待！', publishTime: '2024-01-14' },
            { id: 3, title: '新用户注册即送20元优惠券，限时活动！', publishTime: '2024-01-13' }
          ];
          this.startNoticeSwiper();
        }
      },
      // 点击通知公告项
      onNoticeClick(item) {
        console.log('点击通知:', item.title);
        // 跳转到通知详情页面
        uni.navigateTo({
          url: `/pages/announcement/detail?id=${item.id}`
        });
      },
      // 开始通知轮播
      startNoticeSwiper() {
        // 清除之前的定时器
        if (this.noticeTimer) {
          clearInterval(this.noticeTimer);
        }
        
        // 重置索引
        this.currentIndex = 0;
        
        // 设置新的定时器，每3秒切换一次
        this.noticeTimer = setInterval(() => {
          // 确保在有数据的情况下才滚动
          if (this.announcementList && this.announcementList.length > 0) {
            this.currentIndex = (this.currentIndex + 1) % this.announcementList.length;
          }
        }, 3000);
      },
      // 停止通知轮播
      stopNoticeSwiper() {
        if (this.noticeTimer) {
          clearInterval(this.noticeTimer);
          this.noticeTimer = null;
        }
      },
      // 获取分类数据
      getCategoryList() {
        // 实际项目中，这里会调用分类API
      },
      // 获取热门商品数据
      getHotProducts() {
        // 实际项目中，这里会调用热门商品API
      },
      // 点击分类项
      onCategoryClick(category) {
        // 跳转到分类页面
        console.log('点击分类:', category.name);
        // 实际项目中，这里会跳转到对应的分类页面
        // uni.navigateTo({
        //   url: `/pages/category/category?id=${category.id}&name=${category.name}`
        // });
      },
      // 点击商品项
      onProductClick(product) {
        // 跳转到商品详情页面
        console.log('点击商品:', product.name);
        // 实际项目中，这里会跳转到商品详情页面
        // uni.navigateTo({
        //   url: `/pages/product/detail?id=${product.id}`
        // });
      },
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    background-color: #f5f5f5;
  }

  /* 顶部导航样式 */
  .header {
    background-color: #3d9a0b;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
  }
  .header-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
  }
  .header-title {
    font-size: 36rpx;
    color: #ffffff;
    font-weight: bold;
    margin-right: 20rpx;
  }
  .header-search {
    flex: 1;
  }
  .search-bar {
    background-color: #ffffff;
    border-radius: 30rpx;
    padding: 12rpx 20rpx;
    display: flex;
    align-items: center;
  }
  .search-icon {
    font-size: 24rpx;
    color: #999999;
    margin-right: 10rpx;
  }
  .search-text {
    font-size: 24rpx;
    color: #999999;
  }

  /* 轮播图样式 */
  .banner-container {
    width: 100%;
    height: 300rpx;
    background-color: #ffffff;
  }
  .banner-swiper {
    width: 100%;
    height: 100%;
  }
  .banner-img {
    width: 100%;
    height: 100%;
  }

  /* 通知公告样式 */
  .notice-container {
    background-color: #ffffff;
    margin-top: 10rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
  }
  .notice-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
  }
  .notice-content {
    flex: 1;
    height: 80rpx;
    overflow: hidden;
    position: relative;
    margin-right: 20rpx;
  }
  .notice-swiper {
    position: absolute;
    width: 100%;
  }
  .notice-text {
    font-size: 28rpx;
    color: #789e8b;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
  }
  .notice-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10rpx;
  }
  .notice-time {
    font-size: 24rpx;
    color: #789e8b;
    white-space: nowrap;
  }
  .notice-more {
    display: flex;
    align-items: center;
  }
  .more-text {
    font-size: 28rpx;
    color: #666666;
    margin-right: 10rpx;
  }
  .arrow-icon {
    width: 24rpx;
    height: 24rpx;
  }

  /* 分类导航样式 */
  .category-container {
    background-color: #ffffff;
    margin-top: 10rpx;
    padding: 30rpx 0;
    display: flex;
    flex-wrap: wrap;
  }
  .category-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
  }
  .category-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
  }
  .category-icon image {
    width: 60rpx;
    height: 60rpx;
  }
  .category-name {
    font-size: 28rpx;
    color: #333333;
  }

  /* 热门商品样式 */
  .hot-products {
    background-color: #ffffff;
    margin-top: 10rpx;
    padding: 30rpx;
  }
  .hot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }
  .hot-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }
  .hot-more {
    display: flex;
    align-items: center;
  }
  .products-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .product-item {
    width: 48%;
    background-color: #f9f9f9;
    border-radius: 20rpx;
    overflow: hidden;
  }
  .product-img-container {
    position: relative;
    width: 100%;
    height: 300rpx;
  }
  .product-img {
    width: 100%;
    height: 100%;
  }
  .product-tag {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    background-color: #ff6b6b;
    color: #ffffff;
    font-size: 24rpx;
    padding: 5rpx 15rpx;
    border-radius: 20rpx;
  }
  .product-info {
    padding: 20rpx;
  }
  .product-name {
    font-size: 28rpx;
    color: #333333;
    display: block;
    margin-bottom: 10rpx;
  }
  .product-desc {
    font-size: 24rpx;
    color: #666666;
    display: block;
  }
</style>
